<div id="aa">
    <plan :observer="false"
          :new_role="false"
          ref="plan"
    ></plan>
</div>
<style>
    .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

    /*IE/7/6*/
    .clearfix {
        *zoom: 1;
    }

    #plan ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #plan li, #plan .sign .sign__block {
        float: left;
        width: 50px;
        height: 50px;
        margin: 3px;
        border: 1px solid #bbb;
        color: #fff;
        font-size: 12px;
        line-height: 50px;
        text-align: center;
        position: relative;
        border-radius: 10px;
    }

    #plan .btn {
        cursor: pointer;
        background: #e4e4e4;
        display: inline-block;
        border: 1px solid #999999;
        border-radius: 2px;
        width: 120px;
        height: 30px;
        color: #fff;
    }

    #plan .aisle {
        background-color: #bbb;
        border-radius: 0;
        border: 1px solid #fff;
    }

    #plan .aisle:before {
        content: ' ';
        position: absolute;
        width: 58px;
        height: 58px;
        left: -3px;
        top: -4px;
        background-color: #ccc;
        z-index: 3;
    }

    #plan .undefined {
        background-color: #ccc;
    }

    #plan .storageArea {
        background-color: #7ED321;
    }

    #plan .sortingArea {
        background-color: #47D0B2;
    }

    #plan .temporaryStorageArea {
        background-color: #F6A623;
    }

    #plan .unqualifiedArea {
        background-color: #FF5066;
    }

    #plan .selectedState {
        border: 2px solid #BD0FE1 !important;
        margin: 2px !important;
    }

    #plan .inner {
        margin: 0 20px;
    }

    #tag {
        width: 100%;
        overflow: scroll;
    }

    #plan .checkList {

    }

    #plan .btnGroup {

    }

    #plan p {
        margin: 0;
    }

    #plan .signGroup {
        height: 44px;
        margin-top: 16px;
        font-size: 16px;
        color: #333333;
    }

    #plan .sign {
        margin-right: 10px;
        display: inline-block;
        float: left;
    }

    #plan .sign .sign__block {
        width: 20px;
        height: 20px;
        border-radius: 2px;
    }

    #plan .sign .sign__block:before {
        display: none;
    }

    #plan .sign .sign__label {
        float: left;
        margin-top: 3px;
        margin-left: 4px;
    }

    #plan .HouseStructureGroup {

    }

    #plan .HouseStructureGroup .HouseStructure {
        float: left;
        width: 48%;
    }

    #plan .HouseStructureGroup .HouseStructure .el-textarea__inner {
        height: 60px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
    }

    #plan .HouseStructureGroup .HouseStructure__label {
        float: left;
        display: block;
        width: 47%;
        height: 58px;
        margin-left: 2%;
        background: #FCEFB3;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
        padding: 0 1%;
    }

    #plan .HouseStructureGroup {
        margin-top: 30px;
    }

    #plan .btnGroup .el-row {
        margin: 10px 0;
    }


</style>
<script>
    // :warehouse_id="1"
    /*<prod>*/
    console.log('线上版本');
    /*</prod>*/

    Vue.component('plan-block', {
        render: function (h) {
            // create kebabCase id
            var e = this.element;
            var click = this.clc;
            var dClick = this.dclc;
            var step = [1, false, false, false, false, false, false];
            step[e.brgRegionStatus] = true;
            var _class = {
                selectedState: e.select,
                aisle: step[1],
                undefined: step[2],
                storageArea: step[3],
                sortingArea: step[4],
                temporaryStorageArea: step[5],
                unqualifiedArea: step[6]
            };

            return h('li', {
                "class": _class,
                style: {
                    color: '#000'
                },
                attrs: {
                    row: e.row,
                    col: e.col
                },
                on: {
                    click: function () {
                        if (e.brgRegionStatus == -1)return;
                        click(e.click());
                    },
                    dblclick: function () {
                        if (e.brgRegionStatus == -1)return;
                        dClick(e.click());
                    }
                }
            }, e.brgRegionNo)
        },
        props: {
            element: {
                type: Object,
                required: true
            },
            elementPId: 0,
            clc: '',
            dclc: ''
        }
    });

    Vue.component('plan', {
        template: '\
    <div id="plan">\
        <div class="inner">\
        <div class="HouseStructureGroup clearfix">\
        <el-input type="textarea" v-model="desc" class="HouseStructure"></el-input>\
        <div class="HouseStructure__label">\
        <p>库区代码结构, 可点击右侧图标显示！</p>\
    </div>\
    </div>\
    <div class="signGroup" v-if="!observer">\
        <div class="sign"><span class="sign__block undefined"></span><span class="sign__label">未定义</span></div>\
        <div class="sign"><span class="sign__block storageArea"></span><span class="sign__label">存储区</span></div>\
        <div class="sign"><span class="sign__block sortingArea"></span><span class="sign__label">分拣区</span></div>\
        <div class="sign"><span class="sign__block temporaryStorageArea"></span><span class="sign__label">暂存区</span>\
        </div>\
        <div class="sign"><span class="sign__block unqualifiedArea"></span><span class="sign__label">破损区</span>\
        </div>\
        <div class="sign"><span class="sign__block selectedState"></span><span class="sign__label">选中状态</span></div>\
        <div class="sign"><span class="sign__block aisle"></span><span class="sign__label">过道</span></div>                     \
        </div>\
        <div id="tag" style="max-height:350px;">\
        <ul v-for="a of list" :style="{width:listWidth}" class="clearfix">\
        <plan-block\
      v-for="a1 of a"\
        :clc="eClick"\
    :dclc="eDoubleClick"\
    :element="a1">\
        </plan-block>\
        </ul>\
        </div>\
        <p v-if="!observer">快速选择库区</p>\
        <el-checkbox-group v-model="checkList" @change="checkListChange" class="checkList">\
        <el-checkbox :label="big.baqKqName" v-for="big of Kqs"></el-checkbox>\
        </el-checkbox-group>\
        <div class="btnGroup" v-if="false">\
        <el-row>\
        <el-col :span="4">\
        <button class="btn storageArea" @click="set(2)">设为存储区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn temporaryStorageArea" @click="set(4)">设为暂存区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn undefined" @click="set(1)">设为未设定区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn " @click="">查看所有库区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn resetSelect" @click="resetSelect">重置选择</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn resetHouse" v-if="!new_role" @click="resetHouse">调整仓库结构</button>\
        </el-col>\
        </el-row>\
        <el-row>\
        <el-col :span="4">\
        <button class="btn sortingArea" @click="set(3)">设为分拣区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn unqualifiedArea" @click="set(5)">设为破损区</button>\
        </el-col>\
        <el-col :span="4" :offset="8">\
        <button class="btn unqualifiedArea" v-if="!new_role" @click="submit" >保存修改</button>\
        </el-col>\
        </el-row>\
        </div>\
        <el-dialog\
    :title="form.title"\
    :modal="false"\
    @open="dialogOpen"\
    v-model="dialogTableVisible">\
        <el-table :data="form.tableData">\
        <el-table-column property="blLname" label="储位名称" align="center"></el-table-column>\
        <el-table-column property="blLtray" label="托盘数量" align="center"></el-table-column>\
        <el-table-column label="可用操作" align="center">\
        <template scope="props"><el-button size="small" type="info" @click="inlinePrint(props.$index, props.row)">打印</el-button></template>\
        </el-table-column>\
        </el-table>\
        </el-dialog>\
        </div>\
        </div>\
    ',
        props: {observer: null, warehouse_id: null, new_role: null},
        data: function () {
            return {
                isdb: false,
                desc: '',                        // TODO 平面图 总数据信息 (未解析)
                regions: [],                     // 库区
                regionR: [[]],                     // 库区
                Kqs: [],                       // 库区组

                form: this.new_form(),           // 弹出层 基础数据
                dialogTableVisible: false,       // 弹出层 维护

                dialogECharts: {
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },            // 弹出层 图表
                p: [autoPost({
                    urlHock: "hock/warehouse/id.json",
                    urlProd: "/route/warehouseManage/0"
                }), autoPost({
                    urlHock: "hock/warehouse/region.json",
                    urlProd: "/route/warehouseManage/1"
                })],

                checkList: [],                   // 快捷多选 维护
                selected: [],                    // 被选中的库区
                HouseStructure: false            // 库区结构
            };
        },
        computed: {
            list: function () {
                var obj = this;
                var Kqs = [];
                _Kq(-1, '过');
                _Kq(1, '存');
                _Kq(2, '拣');
                _Kq(3, '暂');
                _Kq(4, '破');
                _Kq(5, '其');
                var regionsR = [[]];
                var regions = [];
                var row = 0;
                var rRow = 0;
                var col = 1;
                var step = {};

                var ifAisle = false;
                var desc = this.desc;

                function auto_Kq_region(data, index) {
                    ifAisle = true;
                    step = _region();
                    step.row = row;
                    step.col = col++;
                    step.brgRegionNo = auto_number(row + 1, 1) + '-' + auto_number(col - 1, 1);
                    step.brgRegionStatus = data;
                    console.log(Kqs, index);

                    Kqs[index].baseRegions.push(step);
                    regions.push(step);
                    regionsR[rRow].push(step);
                }

                function _Kq(id, baqKqName, baqArehouseId, baseRegions) {
                    return {
                        "baqKqId": id,
                        "baqArehouseId": baqArehouseId || 1,
                        "baqKqName": baqKqName,
                        "baqIsdel": 1,
                        "baqStatus": id,
                        "baseRegions": baseRegions || []
                    }
                }

                function _region() {
                    return {
                        "brgRegionId": 0,
                        "brgArehouseId": 0,
                        "brgRegionNo": "",
                        "brgKqId": 0,
                        "brgRegionStatus": 0,
                        "baseLocationList": [],

                        row: 0,
                        col: 0,
                        click: function () {
                            return this;
                        },
                        select: false
                    }

                }

                for (var i = 0; i < desc.length; i++) {
                    switch (desc[i]) {
                        case ' ':       //过道
                            auto_Kq_region(-1, '过');
                            break;
                        case '\n':      //换行
                            rRow++;
                            if (!ifAisle) {

                            } else {
                                row++;
                                ifAisle = false;
                            }
                            col = 1;
                            Kqs.push([]);
                            break;
                        case '存':
                            auto_Kq_region(1, '存');
                            break;
                        case '拣':
                            auto_Kq_region(2, '拣');
                            break;
                        case '暂':
                            auto_Kq_region(3, '暂');
                            break;
                        case '破':
                            auto_Kq_region(4, '破');
                            break;
                        default:        //仓库
                            console.log("错误！");
                            auto_Kq_region(5, '其');
                            break;
                    }
                }
                this.Kqs = Kqs;
                this.regions = regions;
                this.regionR = regionsR;

                return regionsR;
            },           // list所有的储存区域
            listWidth: function () {
                var maxNumber = this.regionR[0].length;
                for (var i = 1; i < this.regionR.length; i++) {
                    if (this.regionR[i].length > maxNumber)
                        maxNumber = this.regionR[i].length;
                }
                return maxNumber * 58 + 'px';
            }       // 维护最大平面图宽度
        },
        methods: {
            isAisle: function (id) {
                if (id == -1) {

                } else {

                }
            },
            dialogOpen: function () {
//                var obj = this;
//                Vue.nextTick(function () {
//                    var myChart = echarts.init(document.getElementById('dialogECharts'));
//                    myChart.setOption(obj.$data.dialogECharts);
//                });
            },
            checkListChange: function () {
//                this.resetSelectC(this.regions);
//                this.selected = [];
//                for (var b = 0; b < this.checkList.length; b++) {
//                    var step = this.checkList[b].toLowerCase();
//                    for (var i = 0; i < this.Kqs[step].src.length; i++) {
//                        this.Kqs[step].src[i].select = true;
//                        this.selected.push(this.Kqs[step].src[i]);
//                    }
//                }
            },
            selectedregions: function (e) {
                e.select = !e.select;
                if (e.select) {
                    this.selected.push(e);
                } else {
                    (function (obj, data) {
                        for (var i = 0; i < data.length; i++) {
                            var temp = data[i];
                            if (!isNaN(obj)) {
                                temp = i;
                            }
                            if (temp == obj) {
                                for (var j = i; j < data.length; j++) {
                                    data[j] = data[j + 1];
                                }
                                data.pop();
                            }
                        }
                    })(e, this.selected);
                }
            },
            resetSelect: function () {
                this.resetSelectC(this.regions);
                this.checkList = [];
                this.selected = [];
            },
            set: function (number) {
                //TODO 此处应有检查
                for (var i = 0; i < this.selected.length; i++) {
                    this.selected[i].statusColor[this.selected[i].status] = false;
                    this.selected[i].statusColor[number] = true;
                    this.selected[i].status = number;
                }
                //TODO 此处有应有post请求
                this.resetSelect();
            },
            deleteArea: function () {

            },

            inlinePrint: function (index, row) {
                console.log(row);
            },

            eClick: function (e) {
                var obj = this;
                obj.isdb = false;
                window.setTimeout(function () {
                    if (obj.isdb != false)return;
                    obj.selectedregions(e);
                }, 300);
            },      // 单击库区 选中
            eDoubleClick: function (e) {
                //TODO 模拟弹出层 完整版
                this.isdb = true;
                var obj = this;

                if (this.selected.length < 2) {
                    obj.$data.form.title = '查看\t' + e.id;
                } else {
                    obj.$data.form.title = '选中区域信息';
                }

                this.p[1].post({ids: [1]}, function (json) {
                    obj.$data.form.tableData = json;
                    obj.$data.dialogTableVisible = true;
                });

            },// 双击库区 查看详细信息

            resetHouse: function () {
                this.HouseStructure = !this.HouseStructure;
            },
            resetSelectC: function (regions) {
                for (var b = 0; b < regions.length; b++) {
                    for (var i = 0; i < regions[b].length; i++) {
                        regions[b][i].select = false;
                    }
                }
            },

            new_form: function () {
                return {
                    title: '查看\tA1-1',
                    tableData: this.new_tableData()
                }
            },

            new_tableData: function () {
                return {
                    row: 0,
                    col: 0,
                    status: 0
                }
            },
            init: function () {
                var obj = this;
                app.$data.fullscreenLoading = true;             //显示加载

                //------------------------- 加载 regions      -----------------------
                this.p[0].post({warehouse_id: this.warehouse_id}, function (json) {
                    obj.$data.desc = json.desc;
                    setTimeout(function () {
                        (function (json) {
                            for (var i = 0; i < json.length; i++) {
                                for (var b = 0; b < json[i].length; b++) {
                                    if (typeof obj.$data.regions[i][b] === 'undefined') continue;
                                    for (index in json[i][b]) {
                                        if (index === 'id')continue;
                                        obj.$data.regions[i][b][index] = json[i][b][index];
                                    }
                                }
                            }
                        })(json.regions);
                        app.$data.fullscreenLoading = false;
                    }, 0);
                });

                //------------------------- 是否启用 观察模式-----------------------
                if (this.observer) obj.$data.observer = true;
            },
            submit: function () {
                if (typeof this.warehouse_id === 'undefined') {

                } else {

                }
            }
        },
        mounted: function () {
            /*<debug>*/
            console.log(this.observer, this.warehouse_id);
            /*</debug>*/
            if (this.warehouse_id) this.init();
            if (this.new_role) this.resetHouse();
        }
    });

    var vm = new Vue({
        el: '#aa'
    })
</script>